<template lang="pug">
    .we_main_box
        navs
        .we_main-list.m-auto.page-w
            .banner-box 联系我们
            div.map-boxs.p-lr50
                div(id="container")
            .we-box.m-t60.p-lr50.p-b40
                b 
                    .caption 中国医学科学院药品医疗器械监管科学研究院
                    span
                p.p-t20
                    span 地   址1：
                    | 北京市东城区东堂子胡同4-6号（伍连德故居） 
                p
                    span 邮    编：
                    | 100005
                p
                    span 地   址2：
                    | 北京市朝阳区北土城东路12号（华夏科技园B1）

                p
                    span 邮    编：
                    | 100029
                p
                    span 电    话：
                    | 010-84205645
                p
                    span 邮    箱：
                    | ctiem@cams.cn
</template>
<script>
import Navs from './../../components/nav.vue';
export default {
    data () {
        return {
        };
    },
    components: {
        Navs
    },
    mounted() {
        this.initAMap();
    },
    methods: {
        initAMap() {
            //初始化地图对象，加载地图
            let map = new AMap.Map("container", {
                  resizeEnable: true,
                zoom: 10
            });
            //经度纬度
            let lnglats = [
                [116.42, 39.91],
                [116.43, 39.98],
            ];
            //人员信息
            let student = [
                {
                    name: "北京市东城区东堂子胡同4-6号（伍连德故居）",
                    mailbox: "ctiem@cams.cn",
                    iphone: "010-84205645",
                },
                {
                    name: "北京市朝阳区北土城东路12号（华夏科技园B1）",
                    mailbox: "ctiem@cams.cn",
                    iphone: "010-84205645",
                },
            ];

            //初始化信息窗口

            let infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(0, -10),
            });

            //循环遍历
            
            for (let i = 0; i < lnglats.length; i++) {
                let marker = new AMap.Marker({
                    position: lnglats[i],
                    map: map,
                });
                marker.anchor = "top-left";
                marker.content =
                    '<div style="background: white; width: 350px;border-radius: 10px">\n' +
                    '      <div style="width: 330px;padding-bottom: 8px;line-height: 14px;">\n' +
                    '        <span style="display: inline-block; vertical-align: middle;font-size: 16px;">中国医学科学院药品医疗器械监管科学研究院</span>\n' +
                    "      </div>\n" +
                    "      <hr>\n" +
                    // '      <div style="float: left;margin: 5px 10px">\n' +
                    // '        <img src="http://tpc.googlesyndication.com/simgad/5843493769827749134">\n' +
                    // "      </div>\n" +
                    '      <div style="font-size: 12px;padding-top:10px">\n' +
                    "        <div>地址：" + student[i].name+"</div>\n" +
                    '        <div style="margin: 5px 0px;">电话：'+student[i].iphone+'</div>\n' +
                    "        <div style=\"margin: 5px 10px;color: #20a0ff;display:none\"><a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a></div>\n" +
                    "      </div>\n" +
                    "    </div>";
                marker.on("click", markerClick);
                marker.emit("click", { target: marker });

            }


            //点击事件
            function markerClick(e) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
            }
        }
    }
};
</script>
<style lang="sass" scoped>
    .we_main_box
        .we_main-list
            background: url(./../images/bg-bg.png) no-repeat right bottom
            background-size: 48%
        .map-boxs
            background: url(./../images/bgs.jpg)
            height: 362px
            padding-top: 40px
            padding-bottom: 40px

            #container
                width: 100%
                height: 100%
                border-radius: 6px
                border: 1px solid #E0E0E0
        .we-box
            b
                padding-right: 60px
                font-size: 26px
                color: #004B43
                position: relative
                height: 30px
                width: 578px
                display: inline-block
                .caption
                    position: absolute
                    bottom: 1px
                    left: 0px
                    z-index: 2
                span
                    position: absolute
                    height: 12px
                    background: #F0D478
                    bottom: 0px
                    left: 0px
                    width: 100%
            p
                padding-top: 18px
                color: #333333
                font-size: 20px
                // span
                //     color: #999999
        .map-box
            width: 100%
            margin: 30px 0 0
</style>



